<h1>HTML 文档结构</h1>
<h2>HTML 基本的文档结构</h2>
<p>HTML（HyperText Markup Language，超文本标记语言）基本文档结构是指组成一个基本的 HTML 页面所必须的元素标签。是由一个文档声明 <code>&lt;!doctype html&gt;</code> 作为开头标识，并以一个 <code>&lt;html&gt;</code> 标签作为<em class="annotated" data-title="像一棵树一样，生长的顺序永远都是从根开始">根节点</em>组成的，而 <code>&lt;html&gt;</code> 标签下级（又称“子节点”）又包含 <code>&lt;head&gt;</code> 和 <code>&lt;body&gt;</code> 两个主要的标签。</p>
<div class="no-indent">具体编写格式如下（例 1-1-1）：</div>

<pre><code class="language-html">&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;zh-CN&quot;&gt;
    &lt;head&gt;
      &lt;meta charset=&quot;UTF-8&quot;&gt;
      &lt;title&gt;网页标题&lt;/title&gt;
    &lt;/head&gt;

    &lt;body&gt;
      网页内容
    &lt;/body&gt;
&lt;/html&gt;
</code></pre>
<p>在 HTML 中标签名是不区分大小写的，也就是说一个标签既可以全部写成大写的英文字母，也可以全部写成小写的英文字母（主流的写法），如：<code>&lt;head&gt;</code> 写成 <code>&lt;HEAD&gt;</code>，<code>&lt;body&gt;</code> 写成 <code>&lt;BODY&gt;</code> 都不会影响页面的正常运行。甚至还可以将一个标签元素的英文字母大小混写都是不影响页面正常运行的，但这种做法会影响代码的可读性，从而并不推荐，主流建议全部小写。</p>
<h2>标签的组成</h2>
<p>一个 HTML 文档是由标签组成的，所以说，HTML 不是一种编程语言，它是一种标记语言，标记语言采用标签（Tag）来描述一个网页，而一个标签是由标签名、属性名、属性值和内容组成。</p>
<div class="img-content">

<p><img src="../../images/doc-content/html/composition-markup-sample.jpg" alt="标签的组成"></p>
</div>

<p>一个 HTML 标签需要符合以下特征：</p>
<ol>
<li>一个标签的标签名只能有一个，开始标签（即 <code>&lt;div&gt;</code>）和闭合标签（<code>&lt;/div&gt;</code> 多了一个斜杠）名称必须完全一样。</li>
<li>标签可以同时拥有多个”属性名 + 属性值“对，每对属性之间需要一个空格分隔。</li>
<li>标签的某些属性可以只有属性名，而属性值可以省略（因为值和属性名一样。后面学习”表单“时会经常接触到）。</li>
<li>标签的内容可以是文本内容，也可以是其它标签（即”标签的嵌套“）。</li>
</ol>
<p>正确地认识标签的组成，对以后的学习和交流都有帮助，也是学习 Web 前端开发中的基本环节之一，所以务必要正确地识别一个标签中的各个组成部分及其<strong>术语名称</strong>。</p>
<h2>&lt;!DOCTYPE html&gt;</h2>
<p><strong>&lt;!DOCTYPE html&gt;</strong> 不是标签，而是“文档类型声明”（Document Type Declaration，简称 DOCTYPE），用来告诉浏览器：这个页面应按 HTML 标准来解析。HTML5 的写法非常简洁，只需要这一行。</p>
<p>对于该声明，具有以下需要注意的地方：</p>
<ul>
<li>必须在文件第一行、最顶端，位于 <code>&lt;html&gt;</code> 之前。页面不会显示它，它只影响浏览器的解析模式。</li>
<li>缺少 DOCTYPE 时，很多浏览器会进入“混杂模式（Quirks Mode）”，可能出现布局错位、盒模型计算不一致、CSS 渲染差异等问题。加入 <code>&lt;!DOCTYPE html&gt;</code> 可启用“标准模式（Standards Mode）”，让不同浏览器的行为尽量一致。</li>
<li>大小写不敏感，<code>&lt;!doctype html&gt;</code> 与 <code>&lt;!DOCTYPE html&gt;</code> 都有效；建议采用规范写法 <code>&lt;!DOCTYPE html&gt;</code>。</li>
<li>无需闭合标签；这是一条声明，不需要结束标记。</li>
<li>无需附加任何 DTD 或地址（HTML5 已不需要）。</li>
</ul>
<p>早期的文档类型声明比较复杂，现在已经不再采用，可以简单了解一下，防止在看到时产生错愕感。</p>
<div class="img-content">

<p><img src="../../images/doc-content/html/doctype-old.jpg" alt="早期的文档类型声明"></p>
</div>



<h2>&lt;html&gt;标签</h2>
<p>HTML 文件最基本的标签，在一些新版本的浏览器中没有该标签也能显示出 HTML 内的内容，但是为了兼容更多的浏览器还是应该避免这种“缺斤少两”的行为（除非该页面是使用动态的 HTML 片段加载技术，那外层的所有标签都可以省略，只用保留 <code>&lt;body&gt;</code> 标签内的内容），通常编辑器会将里面的“lang”属性的值设为“en”，这时用带自动翻译的浏览器（如 Google Chrome）打开会识别到该属性值，从而询问用户是否翻译。因而，若网站面向的是中国客户，可以将该属性设置为“<em class="annotated" data-title="简体中文">zh-CN</em>”。</p>
<p>由于该标签是 HTML 文档中最基本的标签，所以它反而是一个非常容易被开发经验不足的开发者所忽略的标签，它在页面中也会根据自身的内容来调整占据浏览器内的高度。</p>
<h2>&lt;head&gt;标签</h2>
<p>该标签的内容不会直接显示到浏览器窗口内，但是可以设置网页标题、网站 <em class="annotated" data-title="SEO（Search Engine Optimization，搜索引擎优化）是通过优化网站内容、结构、关键词及外部链接等方式，提升网站在搜索引擎自然搜索结果中的排名，进而获取更多免费精准流量的网络营销手段。">SEO</em>、样式表和脚本等内容，是组成一个网页必不可少的标签。接下来看看这个标签内可以编写哪些标签，以及这些标签的作用。</p>
<p>我们先来看看这些标签在 <code>&lt;head&gt;</code> 标签内的大致编写方式（例 1-1-2）：</p>
<pre><code class="language-html">&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;zh-CN&quot;&gt;
    &lt;!-- &lt;head&gt;标签可以包含的标签（子标签）--&gt;
    &lt;head&gt;
      &lt;meta charset=&quot;UTF-8&quot; /&gt;
    &lt;meta
      name=&quot;keywords&quot;
      content=&quot;獭米网络, web技术, 前端技术&quot;
    /&gt;
      &lt;title&gt;网页标题&lt;/title&gt;
    &lt;style&gt;
      body {
        font-size: 16px;
        color: black;
      }
    &lt;/style&gt;
    &lt;link rel=&quot;shortcut icon&quot; href=&quot;favicon.ico&quot; /&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;styles/base-style.css&quot; /&gt;
    &lt;script src=&quot;scripts/common.js&quot;&gt;&lt;/script&gt;
    &lt;script&gt;
        console.log(&quot;欢迎来到獭米技术网！&quot;);
    &lt;/script&gt;
    &lt;base href=&quot;https://learn.aulence.com/&quot; target=&quot;_self&quot; /&gt;
    &lt;/head&gt;

    &lt;body&gt;
      ...
    &lt;/body&gt;
&lt;/html&gt;
</code></pre>
<h3>&lt;title&gt;标签对</h3>
<p>该标签必须成对（即必须有结束标签），标签的内容是纯文本的内容，它的内容会显示到浏览器的标签页上。这个标签虽然简单，但是却是通过<em class="annotated" data-title="如 Google、百度、Bing 等">搜索引擎</em>搜索到网站的最直接途径。</p>
<h3>&lt;meta&gt;标签</h3>
<p>该标签属于一个单标签，无需成对编写，可以在标签末尾加上一个斜杠符“/”，也可以不加，如：<code>&lt;meta&gt;</code> 或 <code>&lt;meta /&gt;</code>。该标签主要作用是用来设置<em class="annotated" data-title="通常采用通用编码格式“utf-8”">编码格式</em>，而在现代的 HTML 规范中又引入了很多实用的功能。</p>
<p>该标签主要拥有三个属性：name、content 和 charset。name 属性在设置编码格式的 <code>&lt;meta&gt;</code> 标签中是不需要的，它的作用就是定义 <code>&lt;meta&gt;</code> 标签的功能名称，而 content 属性是定义这个标签功能的具体执行方式或执行内容，书写格式见“例 1-1-2”。常用的 name + content 属性设置组合见下表：</p>
<table>
<thead>
<tr>
<th>功能</th>
<th>name 属性值</th>
<th>content 属性值示例</th>
</tr>
</thead>
<tbody><tr>
<td>网页关键字</td>
<td>keywords</td>
<td>网站向搜索引擎展示的关键字，以英文逗号分隔，如：HTML, CSS, JavaScript</td>
</tr>
<tr>
<td>网页描述</td>
<td>description</td>
<td>网站的简要描述，用于搜索引擎结果展示</td>
</tr>
<tr>
<td>作者信息</td>
<td>author</td>
<td>网页作者的姓名或组织名称</td>
</tr>
<tr>
<td>视口设置（移动端适配）</td>
<td>viewport</td>
<td>width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no</td>
</tr>
<tr>
<td>网页版权信息</td>
<td>copyright</td>
<td>Copyright © 2025 网站名称</td>
</tr>
<tr>
<td>网页生成器</td>
<td>generator</td>
<td>生成网页的工具名称，如：VSCode, Gulp 5.0</td>
</tr>
<tr>
<td>网站机器人索引规则</td>
<td>robots</td>
<td>index, follow（允许索引和跟踪）或 noindex, nofollow（禁止索引和跟踪）</td>
</tr>
<tr>
<td>渲染内核设置（国内浏览器）</td>
<td>renderer</td>
<td>webkit（使用 WebKit 内核）或 ie-comp（使用 IE 兼容模式）</td>
</tr>
</tbody></table>
<h3>&lt;style&gt;标签对</h3>
<p>在该标签对以内，可以编写 CSS 样式（编写方式见“例 1-1-2”）。该标签原来需要一个 <code>type=&quot;text/css&quot;</code> 属性，在 HTML5 的标准后已经不需要该属性了。</p>
<p>不过一般不推荐用这个标签对去编写样式，样式表我们会在以后接触到，它是一个扩展名为“.css”的文件，在 HTML 页面中进行<em class="annotated" data-title="通过链接引用或关联 HTML 页面以外的文件">外链引用</em>，这里暂时不用去纠结。</p>
<h3>&lt;link&gt;标签</h3>
<p>上面我们谈到“外链引用”一词，而这个标签就是用于关联外部文件的，通常用于关联外部的<strong>样式表文件</strong>，这个样式表文件可以是本地电脑中的文件，也可以是互联网中的文件。除了样式表，它还能指定“网站图标”（浏览器标签页左侧的小图标以及浏览器收藏夹里的网站小图标）的位置。另外，在 HTML5 之后，它还能用于资源文件的预加载。</p>
<p>它是一个<strong>单标签</strong>，主要拥有两个属性：</p>
<ul>
<li><strong>rel</strong>：定义关联文件的<strong>类型</strong></li>
<li><strong>href</strong>：设置关联文件的<strong>路径</strong>（本地路径或在线地址）</li>
</ul>
<h3>&lt;script&gt;标签对</h3>
<p>该标签属于一个比较特殊的标签，既可以在这个标签内编写 JavaScript（简称 JS）代码，也能通过 src 属性引用外部的 JS（扩展名为“.js”的文件）文件，但这两种方式互斥，通常使用外部引用 JS 文件的方式。</p>
<p>和 <code>&lt;link&gt;</code> 标签有点相似的是，它在用于引用 JS 文件时，type 属性（<code>type=&quot;text/javascript&quot;</code>）也是可以省略的。</p>
<p>同时，它几乎可以写在页面的任何地方，但考虑到页面的加载方式，规范建议一般是写到 <code>&lt;/body&gt;</code> 这个结束标签之前的行。但如果该页面的加载方式需要某些前置的判断操作，则需要写到 <code>&lt;head&gt;</code> 标签对以内。</p>
<p>它拥有以下属性（记住主要属性即可，后面的属性使用频率不高，以后接触到会专门进行学习）：</p>
<ul>
<li><strong>src</strong>：设置引用文件的<strong>路径</strong>（主要属性）</li>
<li><strong>type</strong>：指定脚本的 <em class="annotated" data-title="Multipurpose Internet Mail Extensions（多用途互联网邮件扩展），是一种“文件类型标识协议”，用于告诉浏览器文件的类型和编码方式，以便于浏览器处理">MIME</em> 类型。如 <code>text/javascript</code> 就是告诉浏览器引用的文件为一个 JS 文件。如值为“<strong>module</strong>”，则表示脚本（现在通常讲的脚本就是 JS）是 <em class="annotated" data-title="ECMAScript 2015 发布的新特性，ECMAScript 是 JavaScript 开发执行的标准">ES6 模块</em>，这个内容会在 JavaScript 相关的课程里展开讲解</li>
<li><strong>async</strong>：<em class="annotated" data-title="加载期间不阻塞 HTML 解析">异步加载</em>脚本，加载完成后立即执行。该属性的值可以省略</li>
<li><strong>defer</strong>：延迟加载脚本，加载期间不阻塞 HTML 解析，等待 HTML 解析完成后按顺序执行</li>
<li><strong>charset</strong>：指定外部脚本的字符编码（如 UTF8），仅当引用外部 JS 文件时生效</li>
<li><strong>crossorigin</strong>：配置跨域请求时的 <em class="annotated" data-title="Cross-Origin Resource Sharing，跨域资源共享，是W3C制定的标准，用于解决浏览器跨域请求资源的权限问题。">CORS</em> 设置，用于加载不同域名下的脚本，它主要有两个值：<ul>
<li><strong>anonymous</strong>：跨域请求不发送用户凭据（如 Cookie）</li>
<li><strong>use-credentials</strong>：跨域请求发送用户凭据。</li>
</ul>
</li>
<li><strong>integrity</strong>：通过哈希值验证外部脚本的完整性，防止脚本被篡改（配合 crossorigin 使用）</li>
</ul>
<h2>&lt;body&gt;标签对</h2>
<p>该标签必须成对编写，是 HTML 文档中最重要的标签之一，因为它是网页<strong>可见内容</strong>的容器。所有需要在浏览器窗口中展现给用户看的内容（如文字、图片、视频、表单、按钮等）都必须写在这个标签对内部。</p>
<p>与 <code>&lt;head&gt;</code> 标签相比，它们各自承担着不同的职责：<code>&lt;head&gt;</code> 标签内的内容是网页的“<em class="annotated" data-title="包括标题、编码、关键字、样式表等配置信息">配置信息</em>”，不会直接显示在浏览器窗口中；而 <code>&lt;body&gt;</code> 标签内的内容则是网页的“主体内容”，会直接呈现在用户面前。简单地说，<code>&lt;head&gt;</code> 是“幕后工作”，<code>&lt;body&gt;</code> 是“台前表演”。</p>
<p>在 HTML 文档中，<code>&lt;body&gt;</code> 标签对的位置是固定的，它必须紧跟在 <code>&lt;/head&gt;</code> 结束标签之后，并且在 <code>&lt;/html&gt;</code> 结束标签之前（可参考“例 1-1-1”）。一个 HTML 文档中只能有一个 <code>&lt;body&gt;</code> 标签对，这是 HTML 规范的强制要求。</p>
<p><code>&lt;body&gt;</code> 标签对内可以包含各种 HTML 标签，如标题标签（<code>&lt;h1&gt;</code> 到 <code>&lt;h6&gt;</code>）、段落标签（<code>&lt;p&gt;</code>）、图片标签（<code>&lt;img&gt;</code>）、链接标签（<code>&lt;a&gt;</code>）等等。这些具体的标签我们将在后续的章节中逐一学习。</p>
<hr>
<section class="chapter-exercise">

<h2>&lt;章节练习&gt;</h2>
<p>通过“例 1-1-1”的 HTML 的基本文档结构，通过代码编辑器（VSCode 或其他文本编辑器）编写一个 HTML 文档，并保存为“index.html”。</p>
<p>找到这个保存的 HTML 文件并打开，确保网页在打开后，浏览器标签页中显示的是“网页标题”，而页面内容是“测试页面内容”。</p>
</section>

<h2>文档流的概念</h2>
<p>所谓的文档流（document stream），就是网页的显示顺序，是 HTML 文档中可显示元素在排列时所占用的位置。HTML文档流中的标签元素遵循&quot;从左到右、从上到下&quot;的排列次序，有如现代汉字的书写顺序一样，但又存在着一些差别。</p>
<div class="no-indent"><a href="../../demo/html/document-stream.html" target="_blank">如例 1-1-3</a>（点击链接查看页面）：</div>

<pre><code class="language-html">&lt;body&gt;
  &lt;div&gt;
    &lt;p&gt;
      &lt;span&gt;对酒当歌，&lt;/span&gt;
      &lt;span&gt;人生几何。&lt;/span&gt;
    &lt;/p&gt;
    &lt;p&gt;
      &lt;span&gt;譬如朝露，&lt;/span&gt;
      &lt;span&gt;去日苦多。&lt;/span&gt;
    &lt;/p&gt;
    &lt;p&gt;
      &lt;span&gt;慨当以慷，&lt;/span&gt;
      &lt;span&gt;忧思难忘。&lt;/span&gt;
    &lt;/p&gt;
    &lt;p&gt;
      &lt;span&gt;何以解忧？&lt;/span&gt;
      &lt;span&gt;唯有杜康。&lt;/span&gt;
    &lt;/p&gt;
  &lt;/div&gt;
&lt;/body&gt;
</code></pre>
<p>在以后会学到的 CSS 样式表中，有一些 CSS 属性可以让指定的元素脱离文档流，也就是忽略元素的默认定位属性（<code>position: static</code>），将元素重新定位（<code>position: absolute</code> 和 <code>position: fixed</code>）或浮动（<code>float: left</code> 和 <code>float: right</code>）到指定位置以适应页面的布局需要。</p>
<p>另外，还有一个关于脱离文档流的特殊情况，就是将 CSS 的 <code>display</code> 属性值设置为 <code>none</code>。这种方式是否属于&quot;脱离文档流&quot;存在一定争议，因为需要明确区分&quot;脱离&quot;和&quot;隐藏&quot;这两个概念的界限。大家可以在学习到这一部分的内容之后自行进行思考。</p>
<h2>标签的嵌套规则</h2>
<p>所谓标签的嵌套，是指一个标签对以内包含另外一个标签，如：<code>&lt;html&gt;</code> 标签内包含 <code>&lt;head&gt;</code> 和 <code>&lt;body&gt;</code> 两个标签对，而 <code>&lt;head&gt;</code> 标签内又可以包含 <code>&lt;meta&gt;</code> 和 <code>&lt;title&gt;</code> 等标签。也就是说标签不仅可以单独存在，又可以包含其他一个或多个标签，而且标签的嵌套可以是多层的，并且嵌套层数是没有限制的。</p>
<p>标签的嵌套根据代码规范性、性能和 SEO 等方面考虑，应当遵循以下规则：</p>
<ul>
<li>HTML 页面中所有需要显示在浏览器窗口内的内容均需要放置在 <code>&lt;body&gt;</code> 标签对以内。</li>
<li>在不影响页面显示、CSS 样式设置和 <em class="annotated" data-title="Document Object Model（文档对象模型）。让开发者能通过 JavaScript 等脚本语言对文档的内容、结构和样式进行动态操作">DOM 操作</em>的前提下，标签的嵌套层数是越少越好。</li>
<li>标签嵌套的基本顺序应该是&quot;<em class="annotated" data-title="对应 CSS 中 display 属性的 block 值">块级标签</em> &gt; <em class="annotated" data-title="对应 CSS 中 display 属性的 inline-block 值">行内块标签</em> &gt; <em class="annotated" data-title="对应 CSS 中 display 属性的 inline 值">行内标签</em>&quot;（这些显示类型会在以后的学习中逐步介绍）。</li>
<li>同一个<em class="annotated" data-title="对应的是 CSS 的 display 属性">显示类型</em>的标签可以进行嵌套，如：“块级标签 &gt; 块级标签”（<code>&lt;p&gt;</code> 标签比较特殊，会在下一章中讲到）、“行内块标签 &gt; 行内块标签”和“行内标签 &gt; 行内标签”。</li>
<li>避免使用“行内标签”去嵌套“行内块标签”和“块级标签”、“行内块标签”去嵌套“块级标签”，虽然有的时候在显示上并不会出现问题，但“行内标签”大部分是不具备<em class="annotated" data-title="如大小、位置等">布局属性</em>的，需要进行显示类型转换才能够进行 CSS 的布局设置，既麻烦，又不规范。</li>
</ul>
<p>这些规则我们可以结合”文档流的概念“中的“例 1-1-3”来帮助理解，其中 <code>&lt;body&gt;</code>、<code>&lt;div&gt;</code> 和 <code>&lt;p&gt;</code> 标签都是“块级标签”，而 <code>&lt;span&gt;</code> 是”行内标签“，而”行内块标签“是比较特殊的，常见于”<em class="annotated" data-title="注册与登录页面中的输入框，就是常见的”表单元素“">表单元素</em>“中，例子中并没有展示。</p>
<div class="no-indent">我们可以通过这样一幅图来理解 HTML 文档中元素的嵌套关系：</div>

<div class="img-content">

<p><img src="../../images/doc-content/html/nesting-of-elements.jpg" alt="元素的嵌套"></p>
</div>

<p>关于元素“显示类型”的种类和标签“显示类型”的分类，我们会在“CSS”课程分类中的“CSS 显示与定位”章节中进行更加详细的讲解和分析，在本章内容中只需要大家在脑中建立起一个 HTML 基本文档结构的嵌套模型。</p>
<h2>本章总结</h2>
<p>本章介绍了 HTML 文档的基本结构和核心组成部分，HTML 不是编程语言，而是一门“标记语言”（但它比掌握一门国家语言来说可是简单太多了），它可以通过“标签”在页面中显示各种文本段落、图片、音频、视频、输入表单、列表、表格等内容，这些我们会在接下来的课程中逐步接触到。</p>
<h3>核心要点：</h3>

<ol>
<li><strong>HTML 文档基本结构</strong>：完整的 HTML 文档必须包含 <code>&lt;!DOCTYPE html&gt;</code> 文档类型声明、<code>&lt;html&gt;</code> 根标签、<code>&lt;head&gt;</code> 配置标签和 <code>&lt;body&gt;</code> 内容标签。这四者缺一不可，共同构成了网页的骨架。</li>
<li><strong>标签的组成</strong>：一个 HTML 标签由标签名、属性名、属性值和内容四部分组成。标签分为双标签（必须成对）和单标签（无需闭合）两种。掌握标签的基本结构和术语名称，是进行 Web 开发的基本功。</li>
<li><strong><code>&lt;head&gt;</code> 标签的作用</strong>：<code>&lt;head&gt;</code> 内的内容不会直接显示在页面上，但它承载着网页的配置信息，包括 <code>&lt;title&gt;</code> 网页标题、<code>&lt;meta&gt;</code> 元数据（如编码、关键字、描述等）、<code>&lt;link&gt;</code> 外链样式表和 <code>&lt;script&gt;</code> 脚本引用等。这些配置直接影响网页的 SEO、性能和用户体验。</li>
<li><strong><code>&lt;body&gt;</code> 标签的重要性</strong>：所有需要展示给用户的内容都必须放在 <code>&lt;body&gt;</code> 标签对内。它是网页的“主体内容”，与 <code>&lt;head&gt;</code> 的“配置信息”相辅相成。</li>
<li><strong>文档流概念</strong>：HTML 元素默认按照“从左到右、从上到下”的顺序排列。理解文档流是后续学习 CSS 布局（如定位、浮动）的重要前提。</li>
<li><strong>标签嵌套规则</strong>：标签可以多层嵌套，但需遵循规范：嵌套层数越少越好；基本顺序为“块级标签 &gt; 行内块标签 &gt; 行内标签”；避免行内标签嵌套块级标签。这些规则保证了代码的规范性和可维护性。</li>
</ol>
<h3>注意事项：</h3>

<ul>
<li>必须在文档首行声明 <code>&lt;!DOCTYPE html&gt;</code>，以启用浏览器的标准模式，避免混杂模式导致的布局问题。</li>
<li>标签名虽不区分大小写，但规范建议统一使用小写，提高代码可读性。</li>
<li><code>&lt;html&gt;</code> 标签的 <code>lang</code> 属性应根据目标用户设置，中文网站推荐使用 <code>zh-CN</code>。</li>
<li><code>&lt;meta charset=&quot;UTF-8&quot;&gt;</code> 必须在 <code>&lt;head&gt;</code> 内的首位声明，保证中文显示不出现乱码。</li>
<li><code>&lt;script&gt;</code> 标签建议放在 <code>&lt;/body&gt;</code> 之前，避免阻塞页面渲染，提升加载性能。</li>
</ul>
<p>通过本章的学习，大家应当能够独立编写出符合规范的 HTML 基本文档结构，并理解每个部分的作用和意义。这些基础知识将伴随您整个 Web 开发生涯，务必牢固掌握。</p>
